<template>
  <div class="img-wrapper" :style="{ width: width, height: height }">
    <div class="img-placeholder">
      <!-- <p style="font-size: 100px;">
        <font-awesome-icon icon="image" />
      </p> -->
      <!-- <span v-if="imgAlt">{{ imgAlt }}</span> -->
    </div>
    <b-img :src="imgSrc" fluid-grow :width="width" :height="height" />
  </div>
</template>

<script>
export default {
  props: {
    imgSrc: {
      type: String,
      required: true,
    },
    imgAlt: {
      type: String,
      default: null,
    },
    width: {
      type: [String, Number],
      required: true,
    },
    height: {
      type: [String, Number],
      required: true,
    },
  },
};
</script>

<style lang="scss" scoped>
.img-wrapper {
  position: relative;
  overflow: hidden;
}
.img-placeholder {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  font-weight: 400;
  font-style: normal;
  font-size: 12px;
  color: #fff;
  line-height: 24px;
  text-align: center;
  // background-color: rgba(228, 228, 228, 1);
  background-color: transparent;
  padding: 6px;
  @include media-breakpoint-down(md) {
    height: 80%;
  }
}
.img-wrapper img {
  position: absolute;
  top: 0;
  left: 0;
}
</style>
